<template>
    <div>
        <mt-header title="文章详情">
            <router-link to="/index" slot="left">
    <mt-button icon="back">返回</mt-button></router-link>
        </mt-header>
        <div class="header">{{article.subject}}</div>
        <div class="answer">
            <div class="invite">邀请回答</div>
            <div class="write">写回答</div>
        </div>
        <img :src="article.image" alt="">
        <div class="main"><p>{{article.description}}</p></div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            id:this.$route.params.id,
            article:{}
            
        }
    },
    mounted(){
       // console.log(this.id)
        this.axios.get('/article?id='+this.id).then(res=>{
            this.article = res.data.article;
            if(this.article.image !== null){
                this.article.image = require('../assets/images/zhihu/'+this.article.image)
             };
            //console.log(this.article)

        })
    }
}
</script>
<style scoped>
.header{
    font-weight: bold;
    font-size: 20px;
    text-align: left;
    margin: 20px 5px;
    padding-left: 10px;
}
.answer{
  width: 100%;
  border-top: 1px solid #C0C0C0;
  color: #0033CC;
  font-size: 15px;
  font-weight: 600;
}
.invite{
    width: 50%;
    float: left;
    height: 35px;
    line-height: 35px;
    margin-right: -1px;
    border-right: 1px solid #C0C0C0;
}
.write{
    width: 50%;
    float: right;
    height: 35px;
    line-height: 35px;
}
.answer::after{
    display: block;
    content: "";
    clear: both;
    height: 10px;
    width: 100%;
    background-color: #CCCCCC;
    margin-bottom: 50px;
}
img{
    width: 360px;
    height: 240px;
    margin-bottom: 10px;
}
.main p{
    padding: 7px;
    font-size: 16px;
    text-indent: 32px;
    text-align: left;
}

</style>